<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文件上传</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .custom-upload {
        position: relative;
        display: inline-block;
        overflow: hidden;
        margin: 10px;
      }

      .upload-input {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }

      .upload-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 16px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        color: #fff;
        background-color: #1890ff;
        border: 1px solid #1890ff;
        border-radius: 2px;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }

      .upload-button:hover {
        background-color: #40a9ff;
        border-color: #40a9ff;
      }

      .upload-button:active {
        background-color: #096dd9;
        border-color: #096dd9;
      }

      .upload-button:focus {
        outline: 0;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      }

      .upload-icon {
        margin-right: 8px;
        font-size: 16px;
      }

      .el-input {
        width: calc(50vw - 40px);
        height: 50vh;
        display: block;
        padding: 10px 15px;
        font-size: 14px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        outline: none;
        transition: border-color 0.3s;
      }

      .el-input:focus {
        border-color: #409eff;
      }

      /* 按钮样式 */
      .el-button {
        padding: 10px 20px;
        font-size: 14px;
        color: white;
        background-color: #409eff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      .el-button:hover {
        background-color: #66b1ff;
      }

      .el-button:disabled {
        background-color: #c0c4cc;
        cursor: not-allowed;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f8fafc;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
      }

      h1 {
        text-align: center;
        color: #1e293b;
      }

      .image-container {
        display: flex;
        overflow-x: auto;
        gap: 15px;
        padding: 15px 0;
        height: 230px;
        -webkit-overflow-scrolling: touch;
      }

      .image-container::-webkit-scrollbar {
        display: none;
      }

      .image-item {
        height: 200px;
        border-radius: 8px;
        flex-wrap: wrap;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        flex-shrink: 0;
      }

      .image-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      }

      .image-item img {
        height: 100%;
        width: auto;
        object-fit: cover;
      }

      .btn-container {
        text-align: center;
        margin-top: 20px;
      }

      button {
        background-color: #3b82f6;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s ease;
      }

      button:hover {
        background-color: #2563eb;
      }

      /* 渐变遮罩 */
      .mask-left,
      .mask-right {
        position: absolute;
        top: 0;
        height: 100%;
        width: 40px;
        pointer-events: none;
      }

      .mask-left {
        left: 0;
        background: linear-gradient(to right, #f8fafc, transparent);
      }

      .mask-right {
        right: 0;
        background: linear-gradient(to left, #f8fafc, transparent);
      }

      .relative-container {
        position: relative;
      }
    </style>
    <script src="./xlsx.full.min.js"></script>
    <script src="./axios.min.js"></script>
  </head>
  <body>
    <div class="custom-upload">
      <input type="file" id="upload" accept="image/*" class="upload-input" />
      <button type="button" class="upload-button">
        <span id="text">+ 上传图片</span>
      </button>
    </div>
    <div id="chengfen"></div>
    <div class="container">
      <div class="relative-container">
        <div class="image-container" id="imageContainer">
          <!-- 图片将通过JavaScript动态添加 -->
        </div>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const container = document.getElementById("imageContainer");
        const chengfen = document.getElementById("chengfen");

        const input = document.getElementById("inputValue");
        const button = document.getElementById("submitButton");
        const text = document.getElementById("text");

        function addSampleImages(list) {
          for (let i = 0; i < list.length; i++) {
            const imgUrl = list[i];

            const imgContainer = document.createElement("div");
            imgContainer.className = "image-item";

            const img = document.createElement("img");
            img.src = imgUrl;
            img.alt = `示例图片`;

            imgContainer.appendChild(img);
            container.appendChild(imgContainer);
          }
        }

        document
          .getElementById("upload")
          .addEventListener("change", async function (e) {
            const file = e.target.files[0];

            if (!file) return;
            if (!file.type.startsWith("image/")) {
              alert("请选择图片文件");
              return;
            }

            // 上传
            const formData = new FormData();
            formData.append("file", file);
            formData.append("checked", false);
            text.innerText = "上传识别中。。。";
            // 使用 axios 发送请求
            // http://180.76.133.196:3000/upload
            axios
              .post("http://172.26.63.140:5000/upload", formData, {
                headers: {
                  "Content-Type": "multipart/form-data", // 确保正确设置 Content-Type
                },
                timeout: 116000000, // 60秒超时（单位：毫秒）
              })
              .then((response) => {
                const { success, chengfenList, imgList } = response.data; // axios 自动解析 JSON，数据在 response.data
                text.innerText = "+ 上传图片";
                if (success) {
                  console.log("chengfenList", chengfenList, imgList);
                  addSampleImages(imgList);
                  chengfen.innerText = "材质成分：" + chengfenList.join(",");
                }
              })
              .catch((error) => {
                console.error("上传失败:", error);
                if (error.response) {
                  // 服务器返回了错误响应（如 4xx/5xx）
                  alert(
                    `上传失败: ${error.response.data.message || error.message}`
                  );
                } else {
                  // 网络错误或请求未发出
                  alert("上传失败: 网络错误或服务器无响应");
                }
              });
          });
      });
    </script>
  </body>
</html>
